<template>
  <div>
    <div class="back-wrap" @click="goBack">
      <img src="../assets/back.png">
    </div>
    <div class="search-list-content">
      <search-bar @search='searchAnswer' :defaultStr='searchStr' style="margin-bottom: 40px;"></search-bar>
      <div v-for="(item, index) in searchRes" :key="index" @click="showDetail(item.id)" class="item-wrap">
        <search-item></search-item>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      :show-close='false'
      width="70%">
      <div class="dialog-content">
        <div class="detail-info">

        </div>
        <div v-for="(item, index) in commentList" :key="index" class="comment-item">
          <comment></comment>
        </div>
        
      </div>
      <div class="comment-input-wrap">
        <el-input placeholder="请输入您的评论" v-model="commentStr"></el-input>
        <img src="../assets/jump-arrow-dark.png" class="send-btn">
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SearchBar from './SearchBar.vue'
import SearchItem from './SearchItem.vue'
import Comment from './Comment.vue'
export default {
  components: { SearchBar, SearchItem, Comment },
  data () {
    return {
      searchStr: this.$route.query.searchStr,
      searchRes: [{id: 1}, {id: 2}, {id: 3}],
      commentList: [{id: 1}, {id: 2}, {id: 3}],
      dialogVisible: false,
      commentStr: ''
    }
  },
  methods: {
    searchAnswer(searchStr) {
      this.$router.push({
        path: 'search',
        query: {
          searchStr: searchStr
        },
      })
    },
    goBack() {
      this.$router.push({
        path: 'home'
      })
    },
    showDetail(id) {
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped lang='less'>
.search-list-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}
.back-wrap {
  position: fixed;
  left: 40px;
  top: 40px;
  cursor: pointer;
}
.item-wrap {
  width: 900px;
  margin-bottom: 40px;
}
/deep/ .el-dialog {
  margin-top: 10vh !important;
  width: 70%;
  height: 80vh;
  border-radius: 10px;
  padding: 80px;
  background-color: #F6F6F6;
  overflow: hidden;
}
/deep/ .el-dialog__header {
  padding: 0;
}
/deep/ .el-dialog__body {
  padding: 0;
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0;
  z-index: 1;
  overflow: hidden;
  overflow-y: auto;
}
.dialog-content {
  padding: 80px;
}
.detail-info {
  width: 100%;
  min-height: 250px;
  box-shadow: 0 4px 4px #afafaf;
  border-radius: 15px;
  background-color: #ffffff;
  margin-bottom: 20px;
}
.comment-item {
  
}
.comment-input-wrap {
  position: fixed;
  bottom: 10vh;
  border-top: 1px solid #C6C6C6;
  background-color: #F6F6F6;
  height: 68px;
  width: 70%;
  padding: 14px 80px;
  box-sizing: border-box;
  display: flex;
}
/deep/ .el-input__inner {
  background: #E8E8E8;
  border: none;
  border-radius: 12px;
  padding: 0 50px 0 15px;
}
.send-btn {
  width: 28px; 
  height: 28px;
  position: absolute;
  right: 94px;
  top: 20px;
}

</style>
